<template>
	<view>
		-----------------------
		<view class="nav" @click="showMsg">消息提示框</view>
		-----------------------
		<view class="nav" @click="showModal">消息确认框</view>
		-----------------------
		<view class="nav" @click="checkTel">手机验证</view>
		-----------------------
		<view class="nav" @click="showBar">底部弹框</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr:['三国演义','红楼梦','西游记','水浒传']
			};
		},
		onLoad(e) {
			//页面初始化加载数据
			uni.showLoading({
				title: '数据加载中',
				mask:true
			});
			
			//加载完数据之后关闭
			setTimeout(()=>{
				uni.hideLoading();
			},1500)
		},
		methods:{
			showBar(){
				uni.showActionSheet({
					itemList: this.arr,
					success:  (res)=> {
						//注意使用function时，不能用this。
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						console.log('选中了：'+this.arr[res.tapIndex]);
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
			},
			checkTel(){
				uni.showModal({
					title: '手机验证',
					editable:true,
					placeholderText:'输入手机号',
					success: function (res) {
						if (res.confirm) {
							//确认后页面跳转
							console.log('确认手机号',res.content);
						} else if (res.cancel) {
							//取消不做操作
							console.log('用户点击取消');
						}
					}
				});
			},
			showModal(){
				uni.showModal({
					title: '提示',
					content: '这是一个模态弹窗',
					success: function (res) {
						if (res.confirm) {
							//确认后页面跳转
							uni.navigateTo({
							    url:'/pages/test/test003'
							})
						} else if (res.cancel) {
							//取消不做操作
							console.log('用户点击取消');
						}
					}
				});
			},
			showMsg(){
				uni.showToast({
					title: '消息内容',//标题
				    mask:true,//魔窗设置
				    duration:1500,//提示时间，默认毫秒
				    icon:"success", //图标设置，一般使用success（限制7个字）、error（限制7个字）、none(不带任何图标)
				    success(){
						//成功后页面跳转
				        setTimeout(()=>{
							uni.navigateTo({
							    url:'/pages/test/test003'
							})
						},1500)
				    }
				});
			}
		}
	}
</script>

<style lang="scss">
	.nav{
		line-height: 90rpx;
		background-color: pink;
		text-align: center;
	}
</style>
